<template>
  <el-card @click="refresh"  class="myCard" shadow="hover">
    <el-row v-if="url!==undefined">
      <el-col :span="8" style="margin: auto">
        <el-image  :class="isRoute" style="width: 80px; height: 80px;" :src="require(`@/assets/${url}.png`)"></el-image>
      </el-col>
      <el-col :offset="4" :span="12">
        <div class="div">{{ title }}</div>
        <div class="text">{{ number }}</div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import {calibrate} from "@/api/ticket";

export default {
  name: "calibrate",
  props:['title','number','url'],
  data(){
    return{
      isRoute:'image',
      setTimes:''
    }
  },
  methods:{
    refresh(){
      this.isRoute='image'
      setTimeout(()=>{
        this.isRoute='imageClick'
      },200)
      clearTimeout(this.setTimes)
      this.setTimes=setTimeout(()=>{
        calibrate().then(()=>{
          this.$emit('refreshInfo')
          this.isRoute='image'
        })
      },2000)
    }
  }
}
</script>

<style lang="less" scoped>
.myCard{
  cursor: pointer;
  width: 250px;
  height: 110px;
  box-sizing: border-box;
  &:hover .image{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}
.image{
  border-radius: 50%;
  transition:  linear 0.3s;
  &:hover{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation:   rotate  1s  ease ;
  }
}
.imageClick{
  border-radius: 50%;
  transition:  linear 0.3s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation:   rotate  1s  ease ;
}
.div{
  line-height: 18px;
  color: rgba(0,0,0,.45);
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 650;
}
.text{
  line-height: 18px;
  color: rgba(0,0,0,.45);
  font-size: 20px;
  margin-bottom: 12px;
  font-weight: 650;
}

</style>
